<template>
        <div>
            <!-- 三级联动品牌车系车型选择 -->
<!--            <el-cascader ref="cascaderRef" :disabled="disabled" v-model="classesAndStudent" :placeholder="placeholder"-->
<!--                         clearable :props="props" filterable-->
<!--                         @change="handleClassChange" style="width:100%;">-->
<!--            </el-cascader>-->

            <searchCascader
                v-model="classesAndStudent"
                filterable
                :width="'100%'"
                :props="props"
                :disabled="disabled"
                :show-all-levels="true"
                :placeholder="'请选择'"
                clearable
                @change="handleClassChange"
                ref="cascaderRef"
            ></searchCascader>
        </div>
</template>

<script>
import {getBrandNames, getSeriesName, getModelName, carModelGetAll,} from "../../api/system/linkageSelect.js";
import searchCascader from "@/components/search-cascader";

export default {
    name: 'LinkageSelectSearch',
    components:{
        searchCascader
    },
    // props: ['placeholder', 'value', 'checkStrictly'],
    props: {
        placeholder: {
            type: String,
            default: '请选择'
        },
        value: {
            type: Array,
            default: () => {
                return []
            }
        },
        checkStrictly: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    model: {
        prop: 'value',
        event: 'dateChange'
    },
    watch: {
        value: {
            handler(val) {
                // console.log('handler', val)
                // this.classesAndStudent = val

                this.classesAndStudent = val?.map((item, index) => {
                    if (item instanceof Object) {
                        return item.id + "_" + index
                    } else {
                        return item + "_" + index

                    }
                }) ?? []
                console.log('this.classesAndStudent', this.classesAndStudent)
            },
            deep: true,
            immediate: true
        },
        classesAndStudent:{
            immediate:true,
            deep:true,
            handler(val){
                console.log('classesAndStudent', val)
            }
        }
    },

    data() {
        return {
            brandList: [],
            seriesList: [],
            modelList: [],
            props: {
                multiple: false,

                value: "id",
                label: "name",
                leaf: "leaf",

                checkStrictly: false,
                // emitPath: true,
                lazy: true, //	是否动态加载子节点，需与 lazyLoad 方法结合使用
                lazyLoad: this.handleGetClassOrStudent, //懒加载调用的方法
                lazySearch: this.lazySearch,
            },

            classesAndStudent: [],
        }
    },
    created() {
        // this.getBrandName()
    },
    mounted() {
        this.props.checkStrictly = this.checkStrictly ?? true
    },
    methods: {

        lazySearch(queryString, callback) {
            // let tmp = []
            // dataJson.forEach((d) => {
            //     d.typeVoList.forEach((dt) => {
            //         dt.voList.forEach((dtv) => {
            //             if (dtv.ennm.indexOf(queryString) != -1) {
            //                 tmp.push({
            //                     id: [
            //                         strRemoveNum(dtv.basincd),
            //                         getReservoirType(dtv.encl),
            //                         dtv.ennmcd,
            //                     ],
            //                     name: [dtv.basinnm, dtv.enclDesc, dtv.ennm],
            //                 })
            //             }
            //         })
            //     })
            // })
            // callback(tmp)
            let result = []

            carModelGetAll({
                modelName:queryString
            }).then(res=>{
                if(res.code=='200'){
                    result = res.data.map(item=>{
                        return {
                            id:[item.carBrandId, item.carSeriesId, item.id],
                            name:[item.brandName, item.seriesName, item.modelName]
                        }
                    })

                    console.log('result', result)

                    callback(result)
                }else {
                    callback(result)
                }
            }).catch(e=>{
                callback(result)
            })
        },

        // //联级选择器获取数据
        handleGetClassOrStudent(node, resolve) {
            //node相当于点击的选项，其中有上一级的信息
            //第一次调用时 node中什么也没有
            //resolve() 返回的内容是子选项

            const {data, level, parent} = node;

            console.log('node', node)

            if (node == 0) {
                getBrandNames({brandName: ""}).then(res => {
                    this.brandList = res
                    const nodes = Array.from(res, item => ({
                        id: item.id + "_0",
                        name: item.name,
                        objs: item,
                        leaf: false
                    }))
                    resolve(nodes)

                })
            } else if (level == 1) {
                getSeriesName(node.value.split("_")[0]).then(res => {
                    this.seriesList = res

                    const nodes = Array.from(res, item => ({
                        id: item.id + "_1",
                        name: item.name,
                        objs: item,
                        leaf: false
                    }))
                    resolve(nodes)

                })
            } else if (level == 2) {
                getModelName(node.value.split("_")[0]).then(res => {
                    this.modelList = res
                    const nodes = Array.from(res, item => ({
                        id: item.id + "_2",
                        name: item.name,
                        objs: item,
                        leaf: true
                    }))
                    resolve(nodes)

                })

            } else {
                resolve()
            }
        },

        //选择器选择后触发
        handleClassChange(node, resolve) {
            console.log('handleClassChange', node)

            const selectedData = this.$refs.cascaderRef.getCheckedNodes();
            if(selectedData && selectedData.length > 0){
                this.commitResult(selectedData);
            }else {
                this.$nextTick(()=>{
                    const selectedData2 = this.$refs.cascaderRef.getCheckedNodes();
                    this.commitResult(selectedData2)
                })
            }
        },

        commitResult(selectedData){
            console.log('Selected data:', selectedData);

            let result = []
            if (selectedData && selectedData.length > 0) {
                let {path, pathLabels} = selectedData[0];

                result = path.map((item, index) => {
                    return {
                        id: item.split("_")[0],
                        name: pathLabels[index]
                    }
                })
            }
            this.$emit('changeNode', result)
        }
    }


}

</script>

<style lang="scss" scoped></style>
